<template>
  <div class="login">
    <div class="login-card">
      <div class="card-title">亚健康系统</div>
      <el-form ref="formRef" :model="formModel" :rules="rules">
        <el-form-item v-if="isLogin" prop="userName">
          <el-input
            v-model="formModel.userName"
            size="large"
            :prefix-icon="User"
            placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item v-if="isLogin" prop="password">
          <el-input
            v-model="formModel.password"
            type="password"
            show-password
            size="large"
            :prefix-icon="Lock"
            placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item v-if="!isLogin" prop="userName">
          <el-input
            v-model="formModel.userName"
            size="large"
            :prefix-icon="User"
            placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item v-if="!isLogin" prop="password">
          <el-input
            v-model="formModel.password"
            type="password"
            show-password
            size="large"
            :prefix-icon="Lock"
            placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item v-if="!isLogin" prop="confirmPassword">
          <el-input
            v-model="formModel.confirmPassword"
            type="password"
            show-password
            size="large"
            :prefix-icon="Lock"
            placeholder="确认密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="submitClick"
            style="width: 100%; margin: 20px 0;" size="large">{{ isLogin ? '登录' : '注册' }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="toggleForm">{{ isLogin ? '没有账号？立即注册' : '已有账号？立即登录' }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import showMsg from '@/utils/message/message'
import { userStore } from '@/store/user'
import { FormInstance, FormRules } from 'element-plus'
import { Iaccount, Iregister } from './types'
import log from "@/router/main/log/log";

const isLogin = ref(true)
const formRef = ref<FormInstance>()
const formModel = ref<Iaccount & Iregister>({
  userName: '',
  password: '',
  confirmPassword: ''
})

const rules = ref<FormRules>({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { pattern: /[a-zA-Z0-9]{4,}$/, message: '用户名非字母或数字，又或长度不足4位', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (value !== formModel.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      }, trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ]
})

const submitClick = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      if (isLogin.value) {
        accountLogin(formModel.value)
      } else {
        accountRegister(formModel.value)
      }
    } else {
      showMsg('warning', '请填写完整信息')
    }
  })
}

const toggleForm = () => {
  isLogin.value = !isLogin.value
  formModel.value = {
    userName: '',
    password: '',
    confirmPassword: ''
  }
}

// 登录逻辑
const accountLogin = async (account: Iaccount) => {
  const user = userStore()
  user.accountLogin(account).then(() => {
  })
}

// 注册逻辑
const accountRegister = async (account: Iregister) => {
  const user = userStore()

   user.accountRegister(account).then(() => {
     isLogin.value = true;
   });

}
</script>


<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  position: relative;
  background: url(http://qn.xianx.top/image/home_banner.webp)center center /cover no-repeat;
  .card-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 20px 10px;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: -10px;
      width: 4px;
      height: 100%;
      background-color: #409eff;
    }
  }
  .login-card {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 170px 60px 180px;
    box-sizing: border-box;
    width: 480px;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(25px);
    height: 100%;
  }
  .verification-code {
    width: 100%;
    display: flex;
    .captcha {
      cursor: pointer;
      height: 35px;
      border-radius: 4px;
      box-sizing: border-box;
    }
    .el-input {
      margin-left: 15px;
    }
  }
}
</style>
